<template>
    <div class="personal">
        <van-nav-bar class="nav-bar" title="个人信息" left-text="返回" left-arrow @click-left="back" fixed />
        <Blueframe>
            <div class="info-box">
                <div class="info-item" @click="getAccountInfo">
                    <div>
                        头像
                    </div>
                    <img :src="userImg.length ? userImg : txtimg" alt="touxiang">
                </div>
                <div class="info-item">
                    <div>
                        用户id
                    </div>
                    <div>
                        {{accountData.userId}}
                    </div>
                </div>
                <div class="info-item">
                    <div>
                        手机号
                    </div>
                    <div>
                        {{accountData.phone}}
                    </div>
                </div>
                <div class="info-item">
                    <div>
                        昵称
                        <van-icon name="records" @click="replaceHandle('昵称','/updateNickName',15,1,'nickName')" />
                    </div>
                    <div>
                        {{accountData.nickName}}
                    </div>
                </div>
                <div class="info-desc">
                    <div>
                        简介
                        <van-icon name="records" @click="replaceHandle('简介','/updateDesc',55,4,'desc')" />
                    </div>
                    <div class="desc-content">
                        {{accountData.desc?accountData.desc:"这人很懒，什么也没留下"}}
                    </div>
                </div>
            </div>
        </Blueframe>
        <van-popup v-model="replaceShow" @closed="()=>{replaceText='';}">
            <div class="relace-box">
                <div class="relace-title">{{replaceTitle}}</div>
                <van-field v-model="replaceText" :rows="replaceRows" autosize type="textarea" :maxlength="replaceLength"
                    size="large" placeholder="请输入" show-word-limit />
                <van-button class="btn-commit" type="primary" block color="#0c34ba" @click="commitReplace">确定修改
                </van-button>
            </div>
        </van-popup>
    </div>
</template>
<script>
    import Blueframe from "../components/Blueframe.vue";
    import "../assets/scss/Personal.scss";
    export default {
        name: 'Personal',
        data() {
            return {
                txtimg: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3531671336,3780835954&fm=26&gp=0.jpg',
                accountData: {},
                userImg: "",

                replaceShow: false,
                replaceTitle: '修改密码',
                replaceText: '',
                replaceUrl: '',
                replaceLength: 53,
                replaceRows: 1,
                replacekey: ''
            }
        },
        components: {
            Blueframe
        },
        created() {
            this.getAccountInfo();
        },
        methods: {
            back() {
                this.$router.go(-1);
            },
            replaceHandle(
                replaceTitle,
                replaceUrl,
                replaceLength,
                replaceRows,
                key
            ) {
                this.replaceShow = true;


                // 修改
                this.replaceTitle = replaceTitle;
                this.replaceUrl = replaceUrl;
                this.replaceLength = replaceLength;
                this.replaceRows = replaceRows;
                this.replacekey = key;

            },
            // 提交修改
            commitReplace() {
                let data = {
                    appkey: this.appkey,
                    tokenString: localStorage.getItem('__tk'),
                }
                data[this.replacekey] = this.replaceText;

                this.axios({
                    method: 'POST',
                    url: this.replaceUrl,
                    data
                }).then(result => {
                    console.log('replace=>', result)
                    if (result.data.code === "C001" || result.data.code === "D001") {
                        this.replaceShow = false;
                        this.$toast.success('修改成功');
                        this.replaceText='';
                    }
                }).catch(err => {
                    console.log(err);
                })

            },
            // 获取个人信息
            getAccountInfo() {
                // /findAccountInfo
                this.axios({
                    method: 'GET',
                    url: '/findAccountInfo',
                    params: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk')
                    }
                }).then(res => {
                    console.log(res);
                    if (res.data.code === "B001") {
                        this.accountData = res.data.result[0];
                        console.log('1111>', this.accountData);
                        this.userImg = res.data.result[0].userImg;
                    }

                }).catch(err => {
                    console.log(err);
                })
            }
        },
    }
</script>